<template>
	<view class='svga-box'>
		<c-svga ref="cSvgaRef" :height="windowHeightRpx+'rpx'" :src="giftDetail.svgaSrc" :loops='1' :auto-play="false"
			@frame='onFrame' @finished='onFinished' @percentage='onPercentage' @loaded='onLoaded'></c-svga>
	</view>
</template>

<script>
	export default {
		props: {},
		components: {

		},
		data() {
			return {
				show: false,
				windowHeightRpx: 1000,
				giftDetail: {
					id: 1,
					svgaSrc: 'https://cdn.osisx.com/game/svga/01007e0c349a4094ba2024de559c8dab.svga'
				}
			}
		},
		watch: {},
		onLoad(option) {


		},
		onReady() {

		},
		methods: {
			async playGift(giftDetail) {
				if (giftDetail.svgaSrc) {
					console.log(giftDetail, '触发礼物动画---------')

					this.stop()
					this.clear()
					await this.$set(this, 'giftDetail', giftDetail)
					this.play()
				}
			},
			play() {
				this.$refs.cSvgaRef.call('startAnimation')
			},
			// 反向播放
			playRev() {
				this.$refs.cSvgaRef.call('startAnimation', true)
			},
			// 暂停
			pause() {
				this.$refs.cSvgaRef.call('pauseAnimation')
			},
			// 停止
			stop() {
				this.$refs.cSvgaRef.call('stopAnimation')
			},
			clear() {
				this.$refs.cSvgaRef.call('clear')
			},
			jumpTo(percent) {
				this.$refs.cSvgaRef.call('stepToPercentage', [percent, true])
			},
			onFinished() {
				console.log('动画停止播放时回调');
				this.$emit('playGiftEnd')
			},
			onFrame(frame) { //动画播放至某帧后回调
				// console.log(frame);
			},
			onPercentage(percentage) { //动画播放至某进度后回调
				// console.log(percentage);
			},
			// Fill AspectFill AspectFit
			setMode(mode = 'Fill') {
				this.$refs.cSvgaRef.call('setContentMode', mode)
			},
			onLoaded() {
				// console.log('加载完成svga');
				// uni.getSystemInfo({
				// 	success: (res) => {
				// 		// 获取屏幕宽度
				// 		let screenWidth = res.windowWidth;
				// 		// 获取屏幕的高度
				// 		let windowHeight = res.windowHeight;
				// 		// 转换为rpx单位
				// 		let windowHeightRpx = 750 * windowHeight / screenWidth;
				// 		this.windowHeightRpx = windowHeightRpx
				// 		console.log('设备可视高度（rpx）:', windowHeightRpx);
				// 	}
				// });
				// this.setMode('Fill')
			}
		},
	}
</script>

<style lang='scss' scoped>
	@import url('./index.scss');
</style>